<template>
  <div class="app-icon-group">
    <img class="icon" src="~@/assets/img/header/menu-icon.png" alt="" />
    <img
      class="icon"
      @click="ForwardDialogClick"
      src="~@/assets/img/header/share-icon.png"
      alt=""
    />
    <el-popover placement="bottom" :width="bodyWidth" trigger="hover">
      <template #reference>
        <img class="icon" src="~@/assets/img/header/problem-icon.png" alt="" />
      </template>
      <ProblemBox v-if="bodyWidth > 0" style="width: 100%" />
    </el-popover>

    <el-popover placement="bottom-start" :width="254" trigger="hover">
      <template #reference>
        <img class="icon" src="~@/assets/img/header/message-icon.png" alt="" />
      </template>
      <div class="message-box">
        <template v-if="noticeList.length">
          <div
            class="message-box-item"
            v-for="notice in noticeList"
            :key="notice.ID"
          >
            <div class="message-box-item-dian"></div>
            <div class="message-box-item-content">
              <div class="message-box-item-content-title">
                {{ notice.title }}
              </div>
              <div class="message-box-item-content-time">
                {{ $dayjs(notice.CreatedAt).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </div>
          <div class="message-box-btn">
            <div class="message-box-btn-clear" @click="clearNotice">
              清除未读消息（20条）
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty description="暂无消息" />
        </template>
      </div>
    </el-popover>
  </div>
  <ForwardDialog ref="ForwardDialogRef" />
</template>

<script setup name="AppIconGroup">
import ForwardDialog from "./ForwardDialog";
const ForwardDialogRef = ref();
import { getTNoticeList } from "@/apis/notice";

const token = useToken();

const ForwardDialogClick = () => {
  ForwardDialogRef.value?.show();
};

const bodyWidth = ref(0);

const noticeList = ref([]);

const getTNotices = () => {
  getTNoticeList().then((res) => {
    noticeList.value = res?.data?.value?.data?.list || [];
    console.log(noticeList.value, "noticeList");
  });
};

// 清除所有未读信息
const clearNotice = () => {};

onUpdated(() => {
  if (token.value) getTNotices();
});

onMounted(() => {
  if (token.value) getTNotices();
  bodyWidth.value = document.body.clientWidth - 10;
  window.addEventListener("resize", () => {
    bodyWidth.value = document.body.clientWidth - 10;
  });
});
</script>

<style lang="scss" scoped>
@import "./iconGroup.scss";
</style>
